<template>
    <div>
        <div>
            <button @click="exportExcel">导出到 Excel</button>
        </div>
        <table border="1" cellspacing="0" cellpadding="5">
            <tr>
                <th>类别</th>
                <th>区域</th>
                <th>信息详情</th>
            </tr>
            <!-- 更高级的逻辑（比如折叠、分组显示、分页） -->
            <template v-for="(group, groupIndex) in dataList">
                <tr v-for="(info, infoIndex) in group.infoList" :key="`${groupIndex}-${infoIndex}`">
                    <!-- 仅在 infoList 的第一项时显示 rowspan 单元格 -->
                    <td v-if="infoIndex === 0" :rowspan="group.infoList.length">{{ group.category }}</td>
                    <td v-if="infoIndex === 0" :rowspan="group.infoList.length">{{ group.region }}</td>
                    <td>{{ info }}</td>
                </tr>
            </template>
        </table>
    </div>
</template>

<script>
import XLSX from 'xlsx-js-style'

export default {
    data() {
        return {
            dataList: [
                {
                    category: '企业信息归集情况',
                    region: '项目信息归集情况',
                    infoList: [
                        '评级信息归集情况',
                        '业务系统中企业家数量(家)',
                        '信用系统归集企业数量'
                    ]
                },
                {
                    category: '企业信息归集情况',
                    region: '项目信息归集情况',
                    infoList: [
                        '评级信息归集情况',
                        '业务系统中企业家数量(家)',
                        '信用系统归集企业数量'
                    ]
                },
                {
                    category: '企业信息归集情况',
                    region: '项目信息归集情况',
                    infoList: [
                        '评级信息归集情况',
                        '业务系统中企业家数量(家)',
                        '信用系统归集企业数量'
                    ]
                },
                {
                    category: '企业信息归集情况',
                    region: '项目信息归集情况',
                    infoList: [
                        '评级信息归集情况',
                        '业务系统中企业家数量(家)',
                        '信用系统归集企业数量'
                    ]
                },
                {
                    category: '企业信息归集情况',
                    region: '项目信息归集情况',
                    infoList: [
                        '评级信息归集情况',
                        '业务系统中企业家数量(家)',
                        '信用系统归集企业数量'
                    ]
                },
                {
                    category: '企业信息归集情况',
                    region: '项目信息归集情况',
                    infoList: [
                        '评级信息归集情况',
                        '业务系统中企业家数量(家)',
                        '信用系统归集企业数量'
                    ]
                }
            ]
        }
    },
    methods: {
        autoWidth(worksheet) {
            const colWidths = [];
            Object.entries(worksheet).forEach(([address, cell]) => {
                if (cell && typeof cell === 'object' && cell.v !== undefined) {
                    // A = 0,B = 1,C = 2
                    var idx = address.match(/^[A-Z]+/)[0].charCodeAt(0) - 'A'.charCodeAt(0);
                    const length = cell.v.length;
                    colWidths[idx] = colWidths[idx] >= length ? colWidths[idx] : length;
                }
            });
            worksheet['!cols'] = colWidths.map(w => ({ wch: w + 12 })); // 加2作为边距
        },
        exportExcel() {
            // 1. 构造一个空的 worksheet 对象
            const ws = {}

            // 合并区域数组（如果你之前已经在用 merge 功能，可以沿用）
            const merges = [];

            // 示例头部
            const headers = ['类别', '区域', '信息详情'];
            headers.forEach((h, col) => {
                const cellRef = XLSX.utils.encode_cell({ r: 0, c: col });
                ws[cellRef] = {
                    v: h,
                    s: {
                        alignment: { horizontal: 'center', vertical: 'center' },
                        font: { bold: true },       // 比如把表头加粗
                        border: {
                            left: { style: 'medium', color: '#000000' },
                            right: { style: 'medium', color: '#000000' },
                            top: { style: 'medium', color: '#000000' },
                            bottom: { style: 'medium', color: '#000000' }
                        },
                    }
                };
            });

            // 从第 1 行开始写数据
            let row = 1;
            this.dataList.forEach(group => {
                const startRow = row;
                group.infoList.forEach(info => {
                    // 类别列
                    let refA = XLSX.utils.encode_cell({ r: row, c: 0 });
                    ws[refA] = {
                        v: group.category,
                        s: { alignment: { horizontal: 'center', vertical: 'center' } }
                    };

                    // 区域列
                    let refB = XLSX.utils.encode_cell({ r: row, c: 1 });
                    ws[refB] = {
                        v: group.region,
                        s: { alignment: { horizontal: 'center', vertical: 'center' } }
                    };

                    // 信息详情列
                    let refC = XLSX.utils.encode_cell({ r: row, c: 2 });
                    ws[refC] = {
                        v: info,
                        s: { alignment: { horizontal: 'center', vertical: 'center' } }
                    };

                    row++;
                });
                // 记录合并范围（同前文）
                merges.push({ s: { r: startRow, c: 0 }, e: { r: row - 1, c: 0 } });
                merges.push({ s: { r: startRow, c: 1 }, e: { r: row - 1, c: 1 } });
            });

            // 定义 sheet 范围
            ws['!ref'] = XLSX.utils.encode_range({
                s: { r: 0, c: 0 },
                e: { r: row - 1, c: headers.length - 1 }
            });
            ws['!merges'] = merges;
            this.autoWidth(ws); // 自动宽度
            ws['!rows'] = [{ hpt: 24 }]; // 设置首行行高

            // 2. 写入 workbook 并导出
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, '导出数据');
            // 3. 直接调用 writeFile 导出
            XLSX.writeFile(wb, '导出结果.xlsx');
        }
    }
}
</script>

<style lang="scss" scoped>
td {
    border: 1px solid #000;
    padding: 8px 12px;
}
</style>